
//渲染页面
let shopS = document.querySelector('.shopS');
let cartall = document.querySelector('.cartall');
let savetall = document.querySelector('.savetall');

render(lists);

function render(goodLists){
    shopS.innerHTML = goodLists.map((item) =>{
        let saveTotal = item.num * (item.oriPrice - item.nowPrice);
        return `
            <tr class="shopList" idx="${item.id}">
                <td class="imgTd">
                    <img class="shops" src="${item.img}" alt="" srcset="">
                </td>
                <td class="titleTd">
                    <h6>${item.title}</h6>
                    <span>ID:#${item.id}</span>
                    <span>Size:${item.size}</span>
                </td>
                <td class="Son2">
                    <span class="reduce">-</span>
                    <input type="text" disabled value="${item.num}" class="count">
                    <span class="add">+</span>
                </td>
                <td class="Son3">
                    <del class="oriPrice">${item.oriPrice} py6</del>
                    <b class="nowPrice">${item.nowPrice} py6</b>
                </td>
                <td class="Son4">
                    <span class="priceAll">${(item.nowPrice * item.num).toFixed(2)} py6</span><span>You save ${saveTotal.toFixed(2)} py6</span>
                </td>
                <td class="Son5">
                    <span class="saveAll"></span>
                    <img class="del" src="../images/del.png" alt="">    
                </td>
            </tr>`
    }).join('')

    //计算总价
    let carTall = goodLists.reduce((pre,cur,index)=>{
        return pre + cur.nowPrice * cur.num;
    },0)
    cartall.firstElementChild.innerHTML = carTall.toFixed(2) + ' py6. ';

    //计算折扣总价
    let saveTall = goodLists.reduce((pre,cur,index) =>{
        return pre + cur.num * (cur.oriPrice - cur.nowPrice)
    },0)
    savetall.innerHTML = `Your Total Saving:${saveTall.toFixed(2)} py6.`
}

//定义变量来接收获取点击元素的父元素，和点击的商品id
let $tr, $id;

//事件委托的形式绑定点击事件
let shop = document.querySelector('.shop');
shop.onclick = (e) =>{
    switch(e.target.className){
        //点击减数量
        case 'reduce':
            //获取点击这个元素的父元素
            $tr = e.target.parentNode.parentNode;
            //拿到父元素中存储的idx属性
            $id = $tr.getAttribute('idx');
            //通过这个idx属性去数据库中匹配数据，改数据
            lists.forEach(item =>{
                //如果获取的id 和数组中对象对应的id一样的时候，更改这个数据num值
                //并且数量不等于1，只有大于1才能减数量  
                if(item.id == $id && item.num > 1){
                    item.num -= 1;
                    render(lists);
                }
            })
            break;

        //点击加数量
        case 'add':
            $tr = e.target.parentNode.parentNode;
            $id =$tr.getAttribute('idx');
            lists.forEach(item =>{
                if(item.id == $id){
                    item.num += 1;
                    render(lists);
                }
            })
            break;
        
        //点击删除此商品
        case 'del':
            let res = confirm('你确定删除吗');
            if(res){
                $tr = e.target.parentNode.parentNode;
                $id = $tr.getAttribute('idx');
                lists.forEach((item,index,array) => {
                    if(item.id == $id){
                        //把当前点击的这个商品从数组中删除
                        array.splice(index,1);
                        render(lists);
                    }
                })
            }
            breaks
    }
}